<template>
	<div style='background: #fff'>
		<div class='content-title'>图片验证码</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' @click='addImage' style='width:120px'>创建图片验证码</button>
			<div style="padding:1px">
				<Table :columns="imageList" :data="imageData" stripe></Table>
			</div>
	    	<div style='overflow: hidden'>
	    		<Page :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
	    	</div>
		</div>
        <!-- 创建图片验证码 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>创建图片验证码</span>
            </p>
            <div>
                 <Form :label-width='160'>
                 	<FormItem label='验证码长度'>
                        <p slot='label'><span class='star'>*</span>验证码长度</p>
                        <InputNumber v-model='formItem.length' :min='0' placeholder='请输入验证码长度' style='width:100%;height:40px'></InputNumber>
                    </FormItem>
                    <FormItem label='验证码字符中排除'>
                        <Input v-model='formItem.exclude' placeholder='请输入验证码字符中排除'></Input>
                    </FormItem>
                    <FormItem label='干扰线条数量'>
                        <InputNumber v-model='formItem.line' :min='0' placeholder='请输入干扰线条数量' style='width:100%;height:40px'></InputNumber>
                    </FormItem>
                    <FormItem label='验证码字符是否有颜色'>
                        <RadioGroup v-model='formItem.color'>
                            <Radio label="0">否</Radio>
		                    <Radio label="1">是</Radio>
		                </RadioGroup>
                    </FormItem>
                    <FormItem label='验证码图片背景色'>
                        <ColorPicker v-model="formItem.bgcolor" class='color-picker'/>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button v-if="!is_click" class='btn-sure' @click="sure">确认</button>
                <button v-if="is_click" class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
    import axios from 'axios'
	export default{
		data(){
			return{
				modal:false,
				imageList: [
                    {
                        title: '模板code',
                        key: 'code'
                    },
                    {
                        title: '验证码长度',
                        key: 'length'
                    },
                    {
                        title: '字符排除',
                        key: 'exclude'
                    },
                     {
                        title: '干扰线条数量',
                        key: 'line'
                    },
                     {
                        title: '字符是否有颜色',
                        key: 'color',
                        render:(h,params)=>{
                            return h('div',params.row.color?'是':'否')
                        }
                    },
                     {
                        title: '图片背景色',
                        key: 'bgcolor'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                imageData: [],
                pagination:{},
                currentPage:1,
                formItem:{
                	length:0,
                	exclude:'',
                	line:0,
                    color:'0',
                    bgcolor:''
                },
                is_click:false,      // 修复连点确定bug
                editId:0
			}
		},
        created(){
            // this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
        },
		methods:{
             getData(){
                this.fetch('/home/app/plugins/imgcode/page/'+this.currentPage).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.imageData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },
            changePage(page){
                this.currentPage = page;
                this.getData();
            },
			addImage(){
                this.editId = 0;
				this.modal = true;
                this.formItem = {
                    length:4,
                	exclude:'',
                	line:2,
                    color:'0',
                    bgcolor:''
                }
			},
			cancel(){
                this.modal = false;
			},
			sure(){
				if(!this.formItem.length){
                	this.$Message.warning('请输入验证码长度')
                	return
                }
                let data = {
                    length:this.formItem.length,
                    exclude:this.formItem.exclude,
                    line:this.formItem.line,
                    color:this.formItem.color,
                    bgcolor:this.formItem.bgcolor
                }
                if(this.formItem.bgcolor){
                    data.color = this.formItem.color = '1';
                }
                if(this.editId){
                    data.id = this.editId;
                }
                this.fetch('/home/app/plugins/imgcode/add',data).then(res=>{
                    this.is_click = true;
                    if(res&&res.data.data&&res.data.code){
                        this.getData()
                        this.modal = false;
                    }
                })
			},
            edit(row){
                this.fetch('/home/app/plugins/imgcode/id/'+row.id).then(res=>{
                    if(res&&res.data.code){
                        this.modal = true;
                        this.formItem = res.data.data;
                        this.editId = res.data.data.id;
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/plugins/imgcode/del/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
            }
		}
	}
</script>
<style>
    .ivu-radio-inner:after{
    	background: #06A0FD!important;
    }
    .ivu-radio-checked .ivu-radio-inner{
    	border-color: #d7dde4!important;
    }
    .color-picker .ivu-input{
        height: 32px!important;
    }
</style>